"use client"
import "./styles.css"
import { useState } from "react"
import AddTodo from "../compnents/AddTodo"
import TodoFilter from "../compnents/TodoFilter"
import TodoList from "../compnents/TodoList"
import { Todo } from "../types"



export default function Home() {

  const [todos, setTodos] = useState<Todo[]>([]);
  const [filter, setFilter] = useState('all');

  const addTodo = (text: string) => setTodos([...todos, { id: (Date.now()).toString(36), text: text, completed: false }]);

  const deleteTodo = (id: string) => setTodos(todos.filter(todo => todo.id !== id));

  const toggleTodo = (id: string) => setTodos(todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo));

  const getFilteredTodos = () => {
    switch (filter) {
      case 'active':
        return todos.filter(todo => !todo.completed);
      case 'completed':
        return todos.filter(todo => todo.completed);
      default:
        return todos;
    }
  };

  return (
    <div className="container">
      <h1>TodoList</h1>
      <AddTodo addTodo={addTodo} setFilter={setFilter} />
      <TodoList todos={getFilteredTodos()} deleteTodo={deleteTodo} toggleTodo={toggleTodo}/>
      <TodoFilter setFilter={setFilter} />
    </div>
  )
}
